<template>
  <div class="login">
    <div class="container">
      <el-row>
        <!-- 左边 -->
        <el-col :span="12" class="left">
          <span class="title-top">Hi!你好</span>
          <span class="title-bottom">欢迎进入数据管理平台</span>
          <img src="/images/login.svg" />
        </el-col>
        <!-- 右边 -->
        <el-col :span="12" class="right">
          <div class="title">欢迎回来</div>
          <x-form ref="form" :model="form" :rules="rules">
            <x-form-item prop="email">
              <div class="email">
                <span class="title">Email</span>
                <x-input class="input" :width="404" v-model="form.email"></x-input>
              </div>
            </x-form-item>
            <x-form-item prop="password">
              <div class="password">
                <div class="title">密码</div>
                <x-input
                  class="input"
                  :width="404"
                  type="password"
                  v-model="form.password"
                ></x-input>
              </div>
            </x-form-item>
            <!-- 相关配置 -->
            <div class="allocation">
              <div class="remember">
                <x-checkbox v-model="remember"></x-checkbox>
                <span>记住我</span>
              </div>
              <div class="forget">
                <a href="">忘记密码?</a>
              </div>
            </div>
            <div class="submit">
              <x-button @click.native="login" :width="404" text="立即登录">登录</x-button>
            </div>
          </x-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { loginAPI } from '@/api/login'
  export default {
    name: 'Login',
    data() {
      return {
        form: {
          email: '',
          password: '',
        },
        rules: {
          email: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { type: 'email', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { type: 'password', trigger: 'blur' },
          ],
        },
        remember: false,
      }
    },
    methods: {
      async login() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            let res = await loginAPI(this.form)
            this.$store.commit('login/setUserInfo', {
              userInfo: res.data.userInfo,
              remember: this.remember,
            })
            this.$router.push('/main')
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/style/config.scss';
  .login {
    position: relative;
    // 用于设置一个固定的宽高，从而让里面的元素居中
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    min-width: 1200px;
    height: 100vh;
  }
  .container {
    min-width: 1200px;
    box-sizing: border-box;
    width: calc(100vw - 80px);
    height: calc(1024px - 80px);
    background-color: #fff;
    border-radius: 24px;

    .left {
      background-color: $primary-color;
      height: calc(1024px - 80px);
      border-radius: 24px 0 0 24px;
      font-size: 40px;
      font-weight: 700;
      color: white;

      .title-top {
        display: block;
        position: absolute;
        left: 119px;
        top: 222px;
      }
      .title-bottom {
        display: block;
        position: absolute;
        left: 119px;
        top: 284px;
      }
      img {
        position: absolute;
        left: 94px;
        top: 396px;
        width: 500px;
        height: 373px;
        opacity: 1;
      }
    }

    .right {
      display: flex;
      align-items: center;
      flex-direction: column;

      .title {
        margin-top: calc(222px - 40px);
        width: 88px;
        height: 26px;
        opacity: 1;
        /** 文本1 */
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 25.78px;
        color: rgba(10, 22, 41, 1);
        text-align: center;
        vertical-align: top;
      }
      .email {
        .title {
          display: block;
          margin-top: 42.53px;
          width: 35px;
          height: 20px;
          opacity: 1;
          /** 文本1 */
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 19.6px;
          color: rgba(125, 133, 146, 1);
          text-align: left;
        }
        .input {
          margin-top: 10px;
        }
      }
      .password {
        .title {
          display: block;
          margin-top: 25.25px;
          width: 35px;
          height: 20px;
          opacity: 1;
          /** 文本1 */
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 19.6px;
          color: rgba(125, 133, 146, 1);
          text-align: left;
        }
        .input {
          margin-top: 10px;
        }
      }

      .allocation {
        display: flex;
        width: 404px;
        justify-content: space-between;
        margin-top: 35.73px;

        .remember {
          display: flex;
          align-items: center;

          span {
            margin-left: 14px;
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(125, 133, 146, 1);
          }
        }
        .forget {
          a {
            font-size: 16px;
            color: rgba(125, 133, 146, 1);
            text-decoration: none;

            &:hover {
              color: $primary-color;
            }

            &:active {
              color: $active-color;
            }
          }
        }
      }
    }
    .submit {
      margin-top: 48.48px;
    }
  }
</style>
